import React, {useReducer, useState} from 'react';

function App(props) {
    // 接收两个参数：
    //    第一个参数是一个reducer函数，该函数返回的结果即是最新的状态，第二个参数是状态的初始值
    // 返回的结果是一个数组
    //    数组中第一个元素是初始状态，第二个元素是一个方法(dispatch)
    // 解释：
    // dispatch:dispatch是一个函数，接收的参数是命令（action）
    // action:命令
    // 通过dispatch发送命令（action),会让工人（reducer函数）去操作状态（state）。
    const [state, dispatch] = useReducer(function (prevState, {type, payload = 1}) {
        let state = prevState;
        if (type === "JIAN") {
            state -= payload;
        } else if (type === "ADD") {
            state += payload;
        }
        return state;
    }, 1)
    return (
        <div>
            <button onClick={() => {
                dispatch({
                    type: "JIAN",// 建议大写
                    payload: 3
                });
            }}>-
            </button>
            {state}
            <button onClick={() => {
                dispatch({
                    type: "ADD",
                    payload: 2// 荷载的数据。
                });
            }}>+
            </button>
        </div>
    );
}

export default App;